<template>
  <div>
    <div id="container"></div>
    <div class="titleButton">
      {{ titleName }}
    </div>
    <Button
      type="info"
      ghost
      class="mapButton"
      v-if="zoomLevel !== 'provice'"
      @click="handleZoomLevel"
    >
      <Icon type="md-arrow-back" size="16" />
      返回
    </Button>
    <div class="mymap mapTool">
      <div id="allmap" style="width:100%;height:calc(100vh - 64px);"></div>
    </div>
  </div>
</template>
<script
  type="text/javascript"
  src="http://api.map.baidu.com/api?v=3.0&ak=ywWCvtahrXoQgMQUvAuzuuUOcIG8dVx1"
></script>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
import inMap from "inmap";
//import guangdong from "./guangdong/guangdong";
import guangdong from "./guangdong/guangdong";
import oilGeoData from "./data/oilGeo";
import oilGeo_point from "./data/oilGeo_point";
import maskData from "./data/maskData";

import constData from "@/util/constData";
var node_schedule = require("node-schedule");
const mapStyle = [
  {
    featureType: "water",
    elementType: "all",
    stylers: {
      color: "#044161"
      //color: "#556282"
    }
  },
  {
    featureType: "land",
    elementType: "all",
    stylers: {
      color: "#052D7E"
      //color: "#182036"
    }
  },
  {
    featureType: "boundary",
    elementType: "geometry",
    stylers: {
      color: "#064f85"
    }
  },
  {
    featureType: "railway",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  // {
  //   featureType: "highway",
  //   elementType: "geometry",
  //   stylers: {
  //     color: "#052D7E"
  //   }
  // },
  // {
  //   featureType: "highway",
  //   elementType: "geometry.fill",
  //   stylers: {
  //     color: "#8B7D7B",
  //     lightness: 1
  //   }
  // },
  // {
  //   featureType: "highway",
  //   elementType: "labels",
  //   stylers: {
  //     visibility: "off"
  //   }
  // },
  //国道省道
  {
    featureType: "nationalway",
    elementType: "geometry",
    stylers: {
      visibility: "on",
      weight: "1"
    }
  },
  {
    featureType: "nationalway",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "provincialway",
    elementType: "geometry",
    stylers: {
      visibility: "on",
      weight: "1"
    }
  },
  {
    featureType: "provincialway",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "nationalwaysign",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "nationalwaysign",
    elementType: "labels.icon",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "provincialwaysign",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "provincialwaysign",
    elementType: "labels.icon",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "nationalway",
    elementType: "geometry.fill",
    stylers: {
      color: "#000000"
    }
  },
  {
    featureType: "provincialway",
    elementType: "geometry.fill",
    stylers: {
      color: "#000000"
    }
  },
  //
  {
    featureType: "arterial",
    elementType: "geometry",
    stylers: {
      color: "#052D7E"
    }
  },
  {
    featureType: "arterial",
    elementType: "geometry.fill",
    stylers: {
      color: "#00508b"
    }
  },
  {
    featureType: "poi",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "green",
    elementType: "all",
    stylers: {
      color: "#056197",
      visibility: "off"
    }
  },
  {
    featureType: "subway",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "manmade",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "local",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "arterial",
    elementType: "labels",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "boundary",
    elementType: "geometry.fill",
    stylers: {
      color: "#029fd4"
    }
  },
  {
    featureType: "building",
    elementType: "all",
    stylers: {
      color: "#1a5787"
    }
  },
  {
    featureType: "label",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  }
  // {
  //   featureType: "highway",
  //   elementType: "labels.text.stroke",
  //   stylers: {
  //     visibility: "on",
  //     color: "#3c4a63ff",
  //     weight: "1"
  //   }
  // },
  // {
  //   featureType: "highway",
  //   elementType: "geometry.fill",
  //   stylers: {
  //     visibility: "on",
  //     color: "#556282ff"
  //   }
  // },
  // {
  //   featureType: "highway",
  //   elementType: "geometry.stroke",
  //   stylers: {
  //     color: "#1c4f7eff"
  //   }
  // },
  // {
  //   featureType: "highway",
  //   elementType: "labels.text.fill",
  //   stylers: {
  //     visibility: "on",
  //     color: "#506083ff"
  //   }
  // },
  // {
  //   featureType: "highway",
  //   elementType: "geometry",
  //   stylers: {
  //     visibility: "off",
  //     weight: "3"
  //   }
  // },
  // {
  //   featureType: "highway",
  //   elementType: "labels",
  //   stylers: {
  //     visibility: "off"
  //   }
  // }
];

const mapStyle1 = [
  {
    featureType: "water",
    elementType: "all",
    stylers: {
      color: "#044161"
    }
  },
  {
    featureType: "land",
    elementType: "all",
    stylers: {
      color: "#052D7E"
    }
  },
  {
    featureType: "boundary",
    elementType: "geometry",
    stylers: {
      color: "#064f85"
    }
  },
  {
    featureType: "railway",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "highway",
    elementType: "geometry",
    stylers: {
      color: "#052D7E"
    }
  },
  {
    featureType: "highway",
    elementType: "geometry.fill",
    stylers: {
      color: "#005b96",
      lightness: 1
    }
  },
  {
    featureType: "highway",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "arterial",
    elementType: "geometry",
    stylers: {
      color: "#052D7E"
    }
  },
  {
    featureType: "arterial",
    elementType: "geometry.fill",
    stylers: {
      color: "#00508b"
    }
  },
  {
    featureType: "poi",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "green",
    elementType: "all",
    stylers: {
      color: "#056197",
      visibility: "off"
    }
  },
  {
    featureType: "subway",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "manmade",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "local",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "arterial",
    elementType: "labels",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "boundary",
    elementType: "geometry.fill",
    stylers: {
      color: "#029fd4"
    }
  },
  {
    featureType: "building",
    elementType: "all",
    stylers: {
      color: "#1a5787"
    }
  },
  {
    featureType: "label",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  }
];

const mapStyle3 = [
  {
    featureType: "water",
    elementType: "all",
    stylers: {
      color: "#044161"
      //color: "#556282"
    }
  },
  {
    featureType: "land",
    elementType: "all",
    stylers: {
      color: "#052D7E"
      //color: "#182036"
    }
  },
  {
    featureType: "boundary",
    elementType: "geometry",
    stylers: {
      color: "#064f85"
    }
  },
  {
    featureType: "railway",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "highway",
    elementType: "geometry",
    stylers: {
      color: "#052D7E"
    }
  },
  {
    featureType: "highway",
    elementType: "geometry.fill",
    stylers: {
      color: "#8B7D7B",
      lightness: 1
    }
  },
  {
    featureType: "highway",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  //国道省道
  {
    featureType: "nationalway",
    elementType: "geometry",
    stylers: {
      visibility: "on",
      weight: "1"
    }
  },
  {
    featureType: "nationalway",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "provincialway",
    elementType: "geometry",
    stylers: {
      visibility: "on",
      weight: "1"
    }
  },
  {
    featureType: "provincialway",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "nationalwaysign",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "nationalwaysign",
    elementType: "labels.icon",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "provincialwaysign",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "provincialwaysign",
    elementType: "labels.icon",
    stylers: {
      visibility: "on"
    }
  },
  {
    featureType: "nationalway",
    elementType: "geometry.fill",
    stylers: {
      color: "#000000"
    }
  },
  {
    featureType: "provincialway",
    elementType: "geometry.fill",
    stylers: {
      color: "#000000"
    }
  },
  //
  {
    featureType: "arterial",
    elementType: "geometry",
    stylers: {
      color: "#052D7E"
    }
  },
  {
    featureType: "arterial",
    elementType: "geometry.fill",
    stylers: {
      color: "#00508b"
    }
  },
  {
    featureType: "poi",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "green",
    elementType: "all",
    stylers: {
      color: "#056197",
      visibility: "off"
    }
  },
  {
    featureType: "subway",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "manmade",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "local",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "arterial",
    elementType: "labels",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "boundary",
    elementType: "geometry.fill",
    stylers: {
      color: "#029fd4"
    }
  },
  {
    featureType: "building",
    elementType: "all",
    stylers: {
      color: "#1a5787"
    }
  },
  {
    featureType: "label",
    elementType: "all",
    stylers: {
      visibility: "off"
    }
  },
  {
    featureType: "highway",
    elementType: "labels.text.stroke",
    stylers: {
      visibility: "on",
      color: "#3c4a63ff",
      weight: "1"
    }
  },
  {
    featureType: "highway",
    elementType: "geometry.fill",
    stylers: {
      visibility: "on",
      color: "#556282ff"
    }
  },
  {
    featureType: "highway",
    elementType: "geometry.stroke",
    stylers: {
      color: "#1c4f7eff"
    }
  },
  {
    featureType: "highway",
    elementType: "labels.text.fill",
    stylers: {
      visibility: "on",
      color: "#506083ff"
    }
  },
  {
    featureType: "highway",
    elementType: "geometry",
    stylers: {
      visibility: "on",
      weight: "1"
    }
  },
  {
    featureType: "highway",
    elementType: "labels",
    stylers: {
      visibility: "on"
    }
  }
];

export default {
  data() {
    return {
      zoomLevel: "provice", // provice city region
      //zoomLevel: "city",
      inmap: "",
      bmap: "",
      // normalPoints: [],//道路无事件发生
      // warnPoints:[],//道路有事间发生
      polygonOverlay: "", // 地图行政区域涂图层
      moveLineOverlay: "", // 移动的线图层
      nomalPointAnimationOverlay: "", // 点动画
      warnPointAnimationOverlay:"",
      titleName: "广东"
    };
  },
  mounted() {
    this.inmap = new inMap.Map({
      id: "allmap",
      skin: mapStyle3,
      //skin: "Blueness",
      center: [116.345947265625, 23.050960808078566], //地图中心点
      zoom: {
        value: 8, //当前地图级别
        show: false, //放大缩小按钮显示
        max: 14,
        min: 7
      }
    });
    //map.setMapStyle({ styleJson: mapState1 });
    this.bmap = this.inmap.getMap(); //返回百度地图实例
    //var mapStyle3 = { style: "midnight" };
    //this.bmap.setMapStyle(mapStyle3);

    // var map = new BMap.Map("container");
    // var point = new BMap.Point(116.547607421875, 33.85899072578227);
    // this.bmap.centerAndZoom(point, 7);
    // map.enableScrollWheelZoom(); //启用滚轮放大缩小

    // this.bmap.setMapStyleV2({
    //   styleId: "7044f6ac667e5d3445ac03a173c56915"
    // });
    //this.bmap.setMapStyle(mapStyle);
    //this.drawLine();

    this.drawLine();
  },
  computed: {
    ...mapState(['warnPoints','normalPoints']),
    // 记录warnPoints 的变化
    changePoints() {
      return this.$store.state.warnPoints;
    }
  },
  watch: {
    // 当warnPoints改变时，则重新绘制point的颜色
    changePoints (newVal, oldVal) {
      this.warnPointAnimationOverlay.setOptionStyle({
        style: {
          fps: 95, //动画帧数
          color: "#FA0000",//"#FAFA32"
          size: 20,
          speed: 0.2
        },
        data: this.warnPoints
      })
      this.nomalPointAnimationOverlay.setOptionStyle({
        style: {
          fps: 95, //动画帧数
          color: "#FAFA32",//"#FAFA32"
          size: 20,
          speed: 0.2
        },
        data: this.normalPoints
      })

      }
  },
  methods: {
    ...mapActions(["onloadVideoStreamPlayer"]),
    async jumpPage(params) {
      await this.onloadVideoStreamPlayer(params);
      this.$router.push({ path: "/monitor" });
    },
    drawLine() {
      // 地图行政区域涂图层
      this.polygonOverlay = new inMap.PolygonOverlay({
        tooltip: {
          //	图层的悬浮提示层配置
          show: false,
          formatter: function(params) {
            return (
              "<div style='background-color:#fff;color:red;margin:-10px !important;padding:10px !important;'>" +
              " <div>" +
              " <span>时间 : </span><span>14:00</span>" +
              " </div>" +
              " <div>" +
              " <span>地区 : </span><span>" +
              params.name +
              "</span>" +
              " </div>" +
              // " <div>" +
              // " <span>评分 : </span><span>" +
              // // params.count +
              // Math.round(Math.random()*10+75) +
              // "</span>" +
              // " </div></div>"
              "</div>"
            );
          },
          offsets: {
            top: 15,
            left: 15
          },
          customClass: "auto"
        },
        event: {
          // 行政区域点击事件
          onMouseClick: (item, event) => {
            console.log("鼠标点击", item[0].name, "this:", this);
            if (item[0].name === "西安") {
              this.titleName = "西安";
              this.polygonOverlay.setData(xian.xian);
              this.zoomLevel = "city";
              // this.bmap.centerAndZoom(new BMap.Point(108.895713,33.597066), 10)
              this.bmap.centerAndZoom(new BMap.Point(108.87976, 34.040899), 10);

              this.$emit("showInfo", this.titleName);
            } else if (item[0].name === "新城区") {
              console.log("地图中心：", xian.xian[0].properties.center);
              let lat = xian.xian[0].properties.center[0];
              let lon = xian.xian[0].properties.center[1];
              this.polygonOverlay.setData([xian.xian[0]]);
              this.zoomLevel = "region";
              this.titleName = "新城区";
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13);
            } else if (item[0].name === "未央区") {
              let lat = xian.xian[0].properties.center[0];
              let lon = xian.xian[0].properties.center[1];
              this.polygonOverlay.setData([xian.xian[4]]);
              this.zoomLevel = "region";
              this.titleName = "未央区";
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13);
            } else if (item[0].name === "莲湖区") {
              let lat = xian.xian[0].properties.center[0];
              let lon = xian.xian[0].properties.center[1];
              this.polygonOverlay.setData([xian.xian[2]]);
              this.zoomLevel = "region";
              this.titleName = "莲湖区";
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13);
            } else if (item[0].name === "碑林区") {
              let lat = xian.xian[0].properties.center[0];
              let lon = xian.xian[0].properties.center[1];
              this.polygonOverlay.setData([xian.xian[1]]);
              this.zoomLevel = "region";
              this.titleName = "碑林区";
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13);
            } else if (item[0].name === "雁塔区") {
              let lat = xian.xian[0].properties.center[0];
              let lon = xian.xian[0].properties.center[1];
              this.polygonOverlay.setData([xian.xian[5]]);
              this.zoomLevel = "region";
              this.titleName = "雁塔区";
              this.bmap.centerAndZoom(new BMap.Point(lat, lon), 13);
            }
          },
          onMouseOver(item) {
            // console.log('鼠标悬浮', JSON.stringify(item))
          }
        },
        style: {
          normal: {
            borderWidth: 1.5,
            label: {
              show: true, // 是否显示
              font: "13px bold ",
              color: "#fff"
            }
          },
          mouseOver: {
            shadowColor: "rgba(0, 0, 0, 1)",
            // shadowBlur: 10,
            backgroundColor: "rgba(93,158,247,0.4)",
            borderWidth: 1.5,
            label: {
              color: "rgba(0, 0, 0, 1)"
            }
          },
          // selected: {
          // backgroundColor: "rgba(184,0,0,1)",
          // borderColor: "rgba(255,255,255,1)",
          // label: {
          //     color: "rgba(255,255,255,1)"
          // }
          // },
          colors: [
            "rgba(156,200,249,0.4)",
            "rgba(93,158,247,0.4)",
            "rgba(134,207,55,0.4)",
            "rgba(252,198,10,0.4)",
            "rgba(255,144,0,0.4)"
          ]
        }
      });

      let da = {
        西万路加油站: "80分"
      };
      // 移动的线图层
      this.moveLineOverlay = new inMap.MoveLineOverlay({
        style: {
          point: {
            //散点配置
            tooltip: {
              show: true,
              formatter: params => {
                // console.log('鼠标', JSON.stringify(params))
                return `<div>
                    <div style="font-size:16px;font-weight:blod;">
                      <span>${params.name}</span>
                    </div>
                    <div>
                      <span>经纬度:</span>
                      <span>${params.geometry.coordinates} </span>
                    </div>
                  </div>`;
              },
              customClass: "auto"
            },
            // 散点样式
            style: {
              normal: {
                backgroundColor: "rgba(200, 200, 50, 1)",
                borderWidth: 1,
                borderColor: "rgba(255,255,255,1)",
                size: 6,
                label: {
                  show: true,
                  color: "rgba(255,255,255,1)"
                }
              },
              mouseOver: {
                backgroundColor: "rgba(200, 200, 200, 1)",
                borderColor: "rgba(255,255,255,1)",
                borderWidth: 4
              },
              selected: {
                backgroundColor: "rgba(200,200,50,1)",
                borderColor: "rgba(255,255,255,1)",
                borderWidth: 4,
                size: 10
              }
            },
            event: {
              // 散点点击事件
              onMouseClick: item => {
                let stationInfo = constData.stationList.filter(
                  ele => ele.label === item[0].name.split("站")[0]
                );
                //console.log("stationInfo[0].value:"+stationInfo[0].value)
                let roadName = stationInfo[0].value;
                let params = { roadName };
                console.log("roadname:" + roadName);
                console.log("params:" + params);
                //this.onloadVideoStreamPlayer(params)
                //this.$router.push({ path: '/station-analysis/station/' + stationInfo[0].value + '/today'})
                //this.$router.push({ path: '/monitor'})
                this.jumpPage(params);
              },
              onMouseOver(item) {
                // console.log('鼠标悬浮', JSON.stringify(item))
              }
            }
          },
          line: {
            //线的配置
            style: {
              normal: {
                //borderColor: "rgba(200, 200, 50, 1)",
                borderColor: "rgba(200, 200, 50, 0)",
                borderWidth: 2,
                // shadowColor: 'rgba(255, 250, 50, 1)',
                // shadowBlur: 20,
                lineOrCurive: "curve" // 弧度
              }
            }
          },
          lineAnimation: {
            style: {
              size: 4,
              //移动点颜色
              //fillColor: "#FFEC8B""rgba(200, 200, 50, 0)",
              fillColor: "rgba(200, 200, 50, 0)",
              //移动点阴影颜色
              //shadowColor: "#fff""rgba(200, 200, 50, 0)",
              shadowColor: "rgba(200, 200, 50, 0)",
              //移动点阴影大小
              shadowBlur: 10,
              lineOrCurve: "curve"
            }
          }
        },
        data: oilGeoData
      });
      this.nomalPointAnimationOverlay = new inMap.PointAnimationOverlay({
        style: {
          fps: 95, //动画帧数
          color: "#FAFA32",//"#"
          size: 20,
          speed: 0.2
        },
        data: this.normalPoints
      });
      this.warnPointAnimationOverlay = new inMap.PointAnimationOverlay({
        style: {
          fps: 95, //动画帧数
          color: "#FA0000",//"#FAFA32"
          size: 20,
          speed: 0.2
        },
        data: this.warnPoints
      });

      //this.inmap.add(this.PointAnimationOverlay);
      this.polygonOverlay.setData(guangdong.guangdong);
      this.polygonOverlay.setZIndex(100);
      this.nomalPointAnimationOverlay.setZIndex(1000);
      this.warnPointAnimationOverlay.setZIndex(1000);
      this.moveLineOverlay.setZIndex(10000);

      //添加地图遮罩
      var overlay = new inMap.MaskOverlay({
        style: {
          backgroundColor: "rgba(4,34,95,0.8)",
          //backgroundColor: "rgba(24,32,54,0.8)",
          borderColor: "rgba(250, 250, 55, 0)",
          //shadowColor: "rgba(250, 250, 55, 1)",
          shadowBlur: 20,
          borderWidth: 0
        },
        data: guangdong.guangdong,
        event: {
          onState(state) {
            console.log(state);
          }
        }
      });
      this.inmap.add(overlay);
      this.inmap.add(this.polygonOverlay);
      this.inmap.add(this.nomalPointAnimationOverlay);
      this.inmap.add(this.warnPointAnimationOverlay);
      this.inmap.add(this.moveLineOverlay);

      // overlay.setData(shanxi.shanxi)
    },
    handleZoomLevel() {
      console.log("返回按钮 ", this.zoomLevel);
      if (this.zoomLevel === "city") {
        this.polygonOverlay.setData(guangdong.guangdong);
        this.titleName = "陕西";
        this.zoomLevel = "provice";
        this.bmap.centerAndZoom(new BMap.Point(108.956654, 34.074935), 7);

        this.$emit("showInfo", this.titleName);
      } else if (this.zoomLevel === "region") {
        this.polygonOverlay.setData(xian.xian);
        this.zoomLevel = "city";
        this.titleName = "西安";
        this.bmap.centerAndZoom(new BMap.Point(108.645667, 34.11907), 10);
      }
    }
  }
};
</script>

<style>
.echarts {
  width: 100%;
  height: 100%;
}
.mymap {
  /* height: 63vh; */
  /* width: 100%; */
  overflow: hidden;
  /* border: 2px solid #084272; */
  margin: 0 auto;
}
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
  bottom: 2px !important;
}
.inmap-scale-group {
  bottom: 5px;
}
.auto {
  color: #fff;
  padding: 5px 15px;
  border: 0;
  background-color: rgba(13, 72, 121, 0.3);
}
.mapButton {
  position: absolute;
  top: 10%;
  right: 30%;
  z-index: 999;
}
.titleButton {
  position: absolute;
  color: #ff9900;
  font-size: 30px;
  top: 18%;
  right: 74%;
  z-index: 9999;
}
.mapTool .inmap-scale-group {
  right: 48%;
  bottom: 20%;
  opacity: 0.75;
}
</style>
